import type { FC } from 'react';
import Ionicons from '@expo/vector-icons/Ionicons';
import { View, TouchableOpacity, Text } from 'react-native';
import { primaryColor } from '@/constants/Colors';
import type { TabsProps } from './types';
import styles from './styles';

const Tabs: FC<TabsProps> = (props) => {
  const {
    index = 0,
    filters = [],
    search = true,
    onChange
  } = props;

  const renderSearch = () => {
    return (
      <TouchableOpacity style={styles.search}>
        <Ionicons
          size={24}
          color={primaryColor}
          name="search-outline"
        />
      </TouchableOpacity>
    );
  }


  return (
    <View style={styles.tabs}>
      {search ? renderSearch() : null}
      {filters.map((item, i) => {
        const total = filters.length;
        const active = index === i;
        const last = i === total - 1;
        const textStyles = [
          styles.tabText,
          active && styles.tabTextActive
        ];
        return (
          <TouchableOpacity
            key={item.value}
            onPressIn={() => onChange?.(i)}
            style={[styles.tab, last && styles.tabLast]}
          >
            <Text style={textStyles}>{item.title}</Text>
            {active && <View style={styles.tabIn} />}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default Tabs;